<template>
  <div>
    <el-dialog @open="onOpen" @close="onClose" title="车辆预订" :visible.sync="orderDisplay" width="70%">
      <el-row :gutter="15">
        <!--门店与车辆信息-->
        <el-descriptions class="margin-top" :title=storeInfo.storeName :column="1" :size="size">
          <el-descriptions-item label="地址">{{ storeInfo.address }}</el-descriptions-item>
        </el-descriptions>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-image
                style="width: 100%; height: 100%"
                :src="carInfo.carImageUrl"
                fit="fit"></el-image>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-descriptions class="margin-top" :title=carInfo.carName :column="2" size="size">
                <el-descriptions-item label="车牌号">
                  <el-tag type="success" v-if="carInfo.carPlateNumber.length ===8"
                  >{{ carInfo.carPlateNumber.substring(0, 2) }} ● {{ carInfo.carPlateNumber.substring(2) }}
                  </el-tag>
                  <el-tag v-if="carInfo.carPlateNumber.length ===7"
                  >{{ carInfo.carPlateNumber.substring(0, 2) }} ● {{ carInfo.carPlateNumber.substring(2) }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="车型">{{ carInfo.carSizeLevel }}
                </el-descriptions-item>
                <el-descriptions-item label="押金">￥ {{ carInfo.depositPrice }}</el-descriptions-item>
                <el-descriptions-item label="日租金">￥ {{ carInfo.rentalPrice }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
        </el-row>
        <el-form ref="orderForm" :model="orderData" size="medium" label-width="100px">
          <el-col :span="23">
            <el-form-item label="租期范围" prop="orderTime">
              <el-date-picker
                v-model="orderData.orderTime"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="支付方式">
              <el-radio-group v-model="orderData.payType">
                <el-radio label="1">线下支付</el-radio>
                <el-radio label="2" disabled>微信支付</el-radio>
                <el-radio label="3" disabled>支付宝</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {addOrder} from "@/api/oms/order";

export default {
  props: ["storeInfo", "carInfo", "orderDisplay"],
  name: "OrderForm",
  data() {
    return {
      dialogVisible: false,
      orderData: {
        orderTime: [],
        carId: this.carInfo.carId,
        carName: "",
        carPlateNumber:"",
        discount: 0,
        driveDays: "",
        driveEndDate: "",
        driveHours: "",
        driveStartDate: "",
        orderId: 0,
        orderNumber: "",
        payAmount: 0,
        payType: "",
        storeId: this.storeInfo.storeId,
        storeName: this.storeInfo.storeName,
        address: this.storeInfo.address,
        totalAmount: 0,
        userId: 0
      }
    }
  },
  computed: {},
  watch: {
    orderDisplay(newValue, oldValue) {
      console.log("监听", newValue)
      this.dialogVisible = newValue;
    }
  },
  created() {
    console.log("接收父组件值门店", this.store)
    console.log("接收父组件值车辆", this.carInfo)
  },
  mounted() {
  },
  methods: {
    onOpen() {
    },
    onClose() {
      this.$refs['orderForm'].resetFields()
      this.close()
    },
    close() {
      console.log("关闭弹窗咯")
      this.dialogVisible = false
      this.$emit('close')
      this.$emit('rfresh')

    },
    handleConfirm() {
      this.$refs['orderForm'].validate(valid => {
        if (!valid) return
        this.orderData.driveStartDate=this.orderData.orderTime[0]
        this.orderData.driveEndDate=this.orderData.orderTime[1]
        this.orderData.carId=this.carInfo.carId
        this.orderData.carName=this.carInfo.carName
        this.orderData.carPlateNumber=this.carInfo.carPlateNumber
        //下单
        addOrder(this.orderData).then(response => {
          this.$message({
            message: '车辆预定成功！请及时前往服务站取车。',
            type: 'success'
          });
          this.onClose()
          console.log("预定响应",response)
        })
      })
    },
  }
}

</script>
<style>
</style>
